import React, { useState, useEffect } from 'react';
import { RgbBt, obj_str, is_empty } from 'sui';
import { PsnView } from './psn';
import { get_rgb } from '../cmd';

const BoxView = ({ data, title, high, cl }) => {
    const [main, setMain] = useState();
    const [cur, setCur] = useState();

    useEffect(() => {
        setMain(data);
    }, [data]);

    if (cur) {
        return <PsnView data={cur} title={title} high={high} cl={cl} hreturn={() => setCur(null)}/>;
    }

    const getItem = () => {
        if (is_empty(main)) {
            return null;
        }

        return main.map(d => {
            const sn = obj_str(d, "sn");
            const rgb = get_rgb(sn);

            return <RgbBt key={sn} hcmd={() => setCur(d)} cl={rgb} className="ml-6 mb-4">{sn}</RgbBt>;
        });
    };

    return (
        <div className="w-full flex flex-col">
            <div className={`text-3xl text-${cl}-200 text-center`}>{title}</div>
            <div style={{ height: `${high - 220}px`, width: "100%" }} className="mx-2 my-4 overflow-y-auto">
                {getItem()}
            </div>
        </div>
    );
};

export {BoxView};
